<style>
	#draggable {
		width: 100px;
		height: 100px;
		padding: 0.5em;
		float: left;
		margin: 10px 10px 10px 0;
	}
	#droppable {
		width: 150px;
		height: 150px;
		padding: 0.5em;
		float: left;
		margin: 10px;
	}
	#out {
		width: 500px;
		height: 500px;
		padding: 0.5em;
		float: left;
		margin: 10px;
		
	}
</style>
<script>
	$(function() {
		$("#draggable").draggable();
		$("#out").droppable({
			drop : function(event, ui) {
				$(this).addClass("ui-state-highlight").find("p").html("Dropped!");
			}
		});
	});
		$(function() {
		$("#draggable").draggable();
		$("#out").droppable({
			out : function(event, ui) {
				$(this).addClass("ui-state-disable").find("p").html("Drop here");
			}
		});
	});
	$(function() {
		$("#draggable").draggable();
		$("#droppable").droppable({
			drop : function(event, ui) {
				$(this).addClass("ui-state-highlight").find("p").html("Dropped!");
			}
		});
	});
	$(function() {
		$("#draggable").draggable();
		$("#droppable").droppable({
			out : function(event, ui) {
				$(this).addClass("ui-state-disable").find("p").html("Drop here");
			}
		});
	});

</script>
<div class="demo">
	<div id="draggable" class="ui-widget-content">
		<p>
			Drag me to my target
		</p>
	</div>
	<div id="droppable" class="ui-widget-header">
		<p>
			Drop here
		</p>
	</div>
		<div id="out" class="ui-widget-header">
		<p>
			out
		</p>
	</div>
</div>
<div style="display: none;" class="demo-description">
	<p>
		Enable any DOM element to be droppable, a target for draggable elements.
	</p>
</div>
